<template>
    <view class="content">
        <view class="opx_item" v-for="(item,index) in list" :key="index">
            <view class="zop">
                <image :src="item.headimgurl" class="pic"></image>
                <view class="name">{{item.nickname}}</view>
            </view>
            <view class="ioo">{{item.content}}</view>
            <view class="picx" v-if="item.pics && item.pics.length > 0">
                <image class="pic" v-for="(el, ind) in item.pics" :key="ind" 
                    :src="el.attach_uri" @click="$previewImage(item.pics, ind)"></image>
            </view>
            <view class="times">{{item.create_time}}</view>
        </view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
    </view>
</template>

<script>
    export default{
    	data() {
    		return {
    			status: 'loadmore', //是否显示没有更多了
    			page: 1,
    			list: [], 
                id: '',
    		}
    	},
    	onLoad(option) {
            this.id = option.id
            this.getList()
    	},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
    	methods:{
    	    
    	    getList() {
    	    	if (this.status == 'nomore') return;
    	    	this.status = 'loading';
    	    	this.$ajax('goods_evaluates', {
    	    		userToken: this.$getSync('userToken'),
    	    		page: this.page,
    	    		limit: 10,
                    goods_id: this.id,
    	    	}).then(ret => {
    	    		if (ret.status == 0) {
    	    			if (ret.data.list.length > 0) {
    	    				this.list = this.list.concat(ret.data.list);
    	    				this.page++;
    	    				this.status = 'loadmore'
    	    			} else {
    	    				this.status = 'nomore'
    	    			}
    	    		} else {
    	    			this.$toast(ret.message);
    	    		}
    	    	});
    	    },
    	}
    }
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    
    .opx_item {
        background-color: #fff;
        padding: 25rpx 20rpx;
        margin-bottom: 20rpx;
    
        .zop {
            display: flex;
            align-items: center;
            height: 76rpx;
            margin-bottom: 16rpx;
    
            .pic {
                width: 76rpx;
                height: 76rpx;
                border-radius: 50%;
                margin-right: 24rpx;
            }
    
            .name {
                font-size: 30rpx;
                color: #333;
            }
        }
    
        .ioo {
            font-size: 26rpx;
            margin-bottom: 20rpx;
            word-break: break-all;
            white-space: pre-line;
        }
    
        .picx {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
    
            .pic {
                width: 180rpx;
                height: 180rpx;
                border-radius: 16rpx;
                margin-right: 15rpx;
                margin-bottom: 15rpx;
            }
        }
    
        .times {
            font-size: 24rpx;
            line-height: 52rpx;
        }
    }

</style>
